<template>
    <span>
        <span @click="showModal=true">
            <slot></slot>
        </span>
        <!--添加教师模态框-->
        <n-modal
            v-model:show="showModal"
            :mask-closable="false"
            preset="dialog"
            title="你再多加一个教师呗"
        >
            <n-form
                ref="formRef"
                :model="newTeacherInfo"
                :rules="rules"
                label-placement="left"
                label-width="auto"
                require-mark-placement="right-hanging"
                size="medium"
                :style="{
                    maxWidth: '640px'
                }"
            >
                <n-form-item label="登录账号" path="account">
                    <n-input v-model:value="newTeacherInfo.account" type="text" placeholder="登录所需的账号"/>
                </n-form-item>
                <n-form-item label="教师姓名" path="name">
                    <n-input v-model:value="newTeacherInfo.name" type="text" placeholder="名字"/>
                </n-form-item>
                <n-form-item label="手机号" path="phone">
                    <n-input v-model:value="newTeacherInfo.phone" type="text" placeholder="手机"/>
                </n-form-item>
                <n-form-item label="所属院系" path="college_id">
                    <n-select children-field="noChildren" v-model:value="newTeacherInfo.college_id"
                              :options="useAdmin.academy"/>
                </n-form-item>
                <n-form-item label="登录密码(长度为6-12)" path="password">
                    <n-input v-model:value="newTeacherInfo.password" type="text" placeholder="密码"/>
                </n-form-item>
                <n-form-item label="请再次输入密码" path="passwordCopy">
                    <n-input v-model:value="newTeacherInfo.passwordCopy" type="text" placeholder="重复密码"/>
                </n-form-item>
                <n-form-item label="备注" path="note">
                    <n-input v-model:value="newTeacherInfo.note" type="text" placeholder="备注"/>
                </n-form-item>
                <!--两个按钮-->
                <div style="display: flex; justify-content: flex-end">
                    <n-button @click="onNegativeClick">
                        不加了
                    </n-button>
                    <n-button type="primary" @click="handleValidateButtonClick">
                        就加他/她了!
                    </n-button>
                </div>
            </n-form>
        </n-modal>
    </span>

</template>

<script setup>

import { NButton } from "naive-ui";
import { useAdminStore } from "@/stores/admin";
import workApi from "@/http/workApi";

const useAdmin = useAdminStore()

let showModal = ref(false) // 控制模态框
// 新增老师的信息
let newTeacherInfo = ref({
    account: null,
    name: null,
    phone: null,
    college: null,
    college_id:null,
    password: '123456',
    passwordCopy: '123456',
    note: '',
})
// 密码验证
const validatedPassword = () => {
    if (newTeacherInfo.value.password === newTeacherInfo.value.passwordCopy) {
        return true
    }
    return new Error('密码不一致');
}
// 验证规则
const rules = {
    account: {
        required: true,
        trigger: ["blur"],
        validator(rule, value) {
            if (value === null || value==='') {
                return new Error('还没填写账号');
            }else if (value.length > 11) {
                return new Error('必须在1-10之间');
            }
            return true;
        },

    },
    name: {
        required: true,
        trigger: ['blur'],
        message: '还没说这个老师叫什么呢'
    },
    phone: {
        required: true,
        type: "number",
        trigger: ['blur'],
        validator(rule, value) {
            const reg = /^1[3,4,5,7,8][0-9]{9}$/;
            if (!reg.test(value)) {
                return new Error('手机号输入错误');
            }
            return true
        },
    },
    college_id: {
        required: true,
        type: 'number',
        trigger: ['blur'],
        message: '未填写学院'
    },
    password: {
        required: true,
        trigger: ["blur"],
        message: '还没填写密码'
    },
    passwordCopy: {
        required: true,
        trigger: 'blur',
        validator: validatedPassword
    }
}

// 确认新增老师
let addTeacher = () => {
    workApi.post('register/teacher', newTeacherInfo.value).then((res) => {
        if (res['success']) {
            useAdmin.setTeacher()
            onNegativeClick()
        }

    })
}
// 点击关闭
let onNegativeClick = () => {
    showModal.value = false
    newTeacherInfo.value.account = null
    newTeacherInfo.value.name = null
    newTeacherInfo.value.phone = null
    newTeacherInfo.value.college_id = null
    newTeacherInfo.value.password = '123456'
    newTeacherInfo.value.passwordCopy = '123456'
    newTeacherInfo.value.note = ''
}
// 执行验证
const formRef = ref(null);
const handleValidateButtonClick = (e) => {
    e.preventDefault()
    formRef.value?.validate((errors) => {
        if (!errors) {
            addTeacher()
        } else {
            window.$message.error('好像没有填好, 检查一下吧')
        }
    })
}
</script>

<style scoped lang="less">
.n-button {
  margin: 15px;
}
</style>